<template>
  <div id="main" />
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 绘制图表
    myChart.setOption({ title: {
      text: '绩效指数'
    }, legend: {
      data: ['嘿嘿', '哈哈']
    },
    radar: {
    // shape: 'circle',
      indicator: [
        { name: '考勤', max: 6500 },
        { name: '技术', max: 16000 },
        { name: '管理', max: 30000 },
        { name: '分享', max: 38000 },
        { name: 'bug', max: 52000 },
        { name: '助人', max: 25000 }
      ],
      axisName: {
        formatter: '【{value}】',
        color: '#3d3d3d'
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      }
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '嘿嘿'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: '哈哈'
          }
        ]
      }
    ]
    })
  }

}
</script>

<style lang='scss' scoped>
#main{
  width: 600px;
  height: 500px;
  text-align: center;
}
// canvas{
//     width: 750px !important;
//   height: 500px;
//   text-align: center;

// }
</style>
